<template>
  <!--  <div @mouseup="moveEnd" @mousemove="moveUnit" class="toolCenterView" :style="'left:'+lleft+'%'">-->
  <div @mouseup="moveEnd" @mousemove="moveUnit" class="toolCenterView">
    <div class="shrink" v-show="showTj   && !isRoam" @click="handleContentShow"></div>
    <!--    <div @mouseup="moveEnd" class="tools flex">-->
    <!--      &lt;!&ndash;        <div class="map_size flex boxSize">50m</div>&ndash;&gt;-->
    <!--      <div class="tool_item" @click.stop="showPark=!showPark">-->
    <!--        <div class="tool_name boxSize flex">-->
    <!--          <span>{{ selectPark }}</span>-->
    <!--          <span class="tool_arr"></span>-->
    <!--        </div>-->
    <!--        <div v-show="showPark" class="tool_options">-->
    <!--          <div-->
    <!--              v-for="(item, index) in parkOptions"-->
    <!--              :key="index"-->
    <!--              @click.stop="parkOptionsClick(item)"-->
    <!--              :class="selectActive === item.value ? 'active title boxSize' : 'title boxSize'"-->
    <!--          >-->
    <!--            {{ item.label }}-->
    <!--          </div>-->
    <!--        </div>-->
    <!--      </div>-->

    <!--      <div class="tool_item" @click.stop="spaceClick()">-->
    <!--        <div class="tool_name boxSize flex">-->
    <!--          <span>空间标绘</span>-->
    <!--          <span class="tool_arr"></span>-->
    <!--        </div>-->
    <!--        <div v-show="areaShow" class="tool_options">-->
    <!--          <div-->
    <!--              v-for="(item, index) in areaOptions"-->
    <!--              :key="index"-->
    <!--              @click.stop="areaOptionsClick(item)"-->
    <!--              :class="areaActive === item.value ? 'active title boxSize flex' : 'title boxSize flex'"-->
    <!--          >-->
    <!--            <div class="tool_icon"><img :src="item.icon_1" alt=""></div>-->
    <!--            <div class="txt">{{ item.label }}</div>-->
    <!--            <div class="tool_icon"><img :src="item.icon_2" alt=""></div>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--      </div>-->

    <!--      <div class="tool_item" @click="toolClick()">-->
    <!--        <div class="tool_name boxSize flex">-->
    <!--          <span>工具集</span>-->
    <!--          <span class="tool_arr"></span>-->
    <!--        </div>-->
    <!--        <div v-show="toolShow" class="tool_options">-->
    <!--          <div-->
    <!--              v-for="(item, index) in toolOptions"-->
    <!--              :key="index"-->
    <!--              @click.stop="toolOptionsClick(item)"-->
    <!--              :class="toolActive === item.value ? 'active title boxSize flex' : 'title boxSize flex'"-->
    <!--          >-->
    <!--            <div class="tool_icon"><img :src="item.icon_1" alt=""></div>-->
    <!--            <div class="txt">{{ item.label }}</div>-->
    <!--          </div>-->
    <!--          <div class="child-tiji" v-show="tijiActive">-->
    <!--            <div-->
    <!--                v-for="(item, index) in [{-->
    <!--                  label: '1.选取测量区域',-->
    <!--                  value: 9-->
    <!--                },{-->
    <!--                  label: '2.选取测量高度',-->
    <!--                  value: 10-->
    <!--                }]"-->
    <!--                :key="index"-->
    <!--                @click.stop="toolOptionsClick(item)"-->
    <!--                :class="tijiActive&&tijiActiveIndex===item.value ? 'active title boxSize flex tiji' : 'title boxSize flex tiji'"-->
    <!--            >-->
    <!--              <div class="txt">{{ item.label }}</div>-->
    <!--            </div>-->

    <!--          </div>-->
    <!--        </div>-->
    <!--      </div>-->

    <!--      <div class="tool_item" style="width: 60px;">-->
    <!--        <div class="tool_name boxSize" @click="mapModelClick">-->
    <!--          <span>{{ mapModel }}</span>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </div>-->

    <!--      天气-->
    <transition v-if="showTj  && !isRoam" name="el-zoom-in-center">
      <div v-show="contentShow" class="content_box boxSize">
        <div style="display: flex;flex-direction: column">
          <div class="chart_1 boxSize">
            <div class="chart_title_sort">
              <span>今日天气</span>
            </div>
            <div class="chart_list">
              <div v-for="(item, index) in chart_1_data" :key="index" class="chart_item boxSize flex">
                <img :src="item.icon" alt="">
                <div class="info">
                  <div class="head flex"><span class="sign"></span><span class="chart_title">{{ item.label }}</span>
                  </div>
                  <div class="chart_value">{{ item.value }}</div>
                </div>
              </div>
            </div>
          </div>
<!--          <div class="chart_2 boxSize" v-if="false">-->
<!--            <div class="chart_title_sort">-->
<!--              <span>图例</span>-->
<!--            </div>-->
<!--            <div class="chart_list">-->
<!--              <div v-for="(item, index) in chart_2_data" :key="index" class="chart_item boxSize flex">-->
<!--                <img :src="item.icon" alt="">-->
<!--                <div class="chart_title">{{ item.label }}</div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->

<!--          <div class="chart_3  boxSize"  v-if="showAirChart">-->
<!--            <div class="chart_item boxSize">-->
<!--              <div class="chart_title">-->
<!--                <span>空气质量日历</span>-->
<!--              </div>-->
<!--              <div class="chart_3_1 flex">-->
<!--                <div class="chart_left">-->
<!--                  <div class="head flex">-->
<!--                    <div v-for="(item, index) in chart_3_1_head" class="head_label" :key="index">-->
<!--                      {{ item }}-->
<!--                    </div>-->
<!--                  </div>-->
<!--                  <div class="list flex">-->
<!--                    <div v-for="(item, index) in chart_3_1_list" class="list_label" :key="index">-->
<!--                      <span v-if="item" :style="{color: item.color}">{{ item.date }}</span>-->
<!--                    </div>-->
<!--                  </div>-->
<!--                </div>-->
<!--                <div class="chart_right">-->
<!--                  <div v-for="(item, index) in chart_3_1_config" class="config_list flex" :key="index">-->
<!--                    <div class="icon" :style="{backgroundColor: item.color}"></div>-->
<!--                    <div class="label">{{ item.label }}</div>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="chart_item boxSize">-->
<!--              <div class="chart_title">-->
<!--                <span>24小时废气排放超标次数</span>-->
<!--              </div>-->
<!--              <div class="chart_3_2" ref="air_chart_3_2"></div>-->
<!--            </div>-->
<!--&lt;!&ndash;            <div class="chart_item boxSize">&ndash;&gt;-->
<!--&lt;!&ndash;              <div class="chart_title">&ndash;&gt;-->
<!--&lt;!&ndash;                <span>全年AQI逐月变化 </span>&ndash;&gt;-->
<!--&lt;!&ndash;              </div>&ndash;&gt;-->
<!--&lt;!&ndash;              <div class="chart_3_3" ref="air_chart_3_3"></div>&ndash;&gt;-->
<!--&lt;!&ndash;            </div>&ndash;&gt;-->
<!--          </div>-->
<!--          <div class="chart_3  boxSize" style="display: flex;flex-direction: column" v-if="showPolluteChart">-->
<!--            <div class="chart_item boxSize">-->
<!--              <div class="chart_title">-->
<!--                <span>重点监测企业污染源监测</span>-->
<!--              </div>-->
              <div class="chart_3_1 flex">
                <table style="width: 100%" v-if="pollute_chart_3_1_data.length > 0">
                  <tr >
                    <th width="50%">企业名称</th>
                    <th width="16%">废水</th>
                    <th width="16%">废气</th>
                    <th width="16%">Vocs</th>
                  </tr>
                  <tr v-for="(item, index) in pollute_chart_3_1_data" :key="index"
                      :class="index%2 === 0 ? 'single' : ''">
                    <td width="50%" align="center">{{ item.companyName }}</td>
                    <td width="16%" align="center">
                      <span v-if="item.waterStatus==='正常'" style="color: #00FFC3;">正常</span>
                      <span v-else style="color: #FF3000;">预警</span>
                    </td>
                    <td width="16%" align="center">
                      <span v-if="item.gasStatus==='正常'" style="color: #00FFC3;">正常</span>
                      <span v-else style="color: #FFD12A;">超标</span>
                    </td>
                    <td width="16%" align="center">
                      <span v-if="item.vocsStatus==='正常'" style="color: #00FFC3;">正常</span>
                      <span v-else style="color: #FFD12A;">超标</span>
                    </td>
                  </tr>
                </table>
<!--                  <div class="textBox" v-else>暂无数据</div>-->
              </div>
<!--            </div>-->
<!--            <div class="chart_item boxSize">-->
<!--              <div class="chart_title">-->
<!--                <span>24小时废气排放超标次数</span>-->
<!--              </div>-->
<!--              <div class="chart_3_2" ref="pollute_chart_3_2"></div>-->
<!--            </div>-->
<!--&lt;!&ndash;            <div class="chart_item boxSize">&ndash;&gt;-->
<!--&lt;!&ndash;              <div class="chart_title">&ndash;&gt;-->
<!--&lt;!&ndash;                <span>今年超标排污单位数量 </span>&ndash;&gt;-->
<!--&lt;!&ndash;              </div>&ndash;&gt;-->
<!--&lt;!&ndash;              <div class="chart_3_3" ref="pollute_chart_3_3"></div>&ndash;&gt;-->
<!--&lt;!&ndash;            </div>&ndash;&gt;-->
<!--          </div>-->
        </div>
      </div>
    </transition>

    <!--    箭头弹窗  arrDialogShow  -->
    <!--    <div class="dialog_box arr_dialog_box boxSize" v-if="arrDialogShow">-->
    <!--      <div class="sign"></div>-->
    <!--      <div class="title">生成箭头</div>-->
    <!--      <div class="column flex">-->
    <!--        <div class="name">经纬度</div>-->
    <!--        <div class="input_box boxSize flex">-->
    <!--          <input type="text" placeholder="请输入经度">-->
    <!--        </div>-->
    <!--        <div class="arr"></div>-->
    <!--        <div class="input_box boxSize flex">-->
    <!--          <input type="text" placeholder="请输入纬度">-->
    <!--        </div>-->
    <!--      </div>-->
    <!--      <div class="column flex">-->
    <!--        <div class="name">高度</div>-->
    <!--        <div class="input_box boxSize flex">-->
    <!--          <input type="text" placeholder="请输入">-->
    <!--          <div class="del"></div>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--      <div class="column btn_box">-->
    <!--        <div class="btn_item flex sub" @click="arrDialogShow = false">确认</div>-->
    <!--        <div class="btn_item flex cancel" @click="arrDialogShow = false">取消</div>-->
    <!--      </div>-->
    <!--    </div>-->

    <!--    标签弹窗  tagDialogShow  -->
    <!--    <div class="dialog_box tag_dialog_box boxSize" v-if="tagDialogShow">-->
    <!--      <div class="title">请输入标签名称，点击确定后再选择放置位置</div>-->
    <!--      <div class="column flex">-->
    <!--        <div class="input_box boxSize full flex">-->
    <!--          <input type="text" placeholder="请输入">-->
    <!--          <div class="limit">0/20</div>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--      <div class="column btn_box">-->
    <!--        <div class="btn_item flex sub" @click="tagDialogShow = false">确认</div>-->
    <!--        <div class="btn_item flex cancel" @click="tagDialogShow = false">取消</div>-->
    <!--      </div>-->
    <!--    </div>-->

    <!--    单位弹窗  unitDialogShow  -->
    <!--    <div @mouseup="moveEnd" class="dialog_box unit_dialog_box boxSize" v-if="unitDialogShow"-->
    <!--         :style="(mx!=0&&my!=0)&&({'left':mx+'px','top':my+'px'})">-->
    <!--      <div @mouseup="moveEnd" @mousedown="moveStart" class="hide-focus"></div>-->
    <!--      <div class="close" @click="unitDialogShowChange()"></div>-->
    <!--      <div class="title">总长度：</div>-->
    <!--      <div class="list flex boxSize">-->
    <!--        <div class="num">1.</div>-->
    <!--        <div class="input_box boxSize full flex" style="color: #FFFFFF">-->
    <!--          {{-->
    <!--            measureData[0].length > 2 ? measureData[0][measureData[0].length - 1] : (measureData[0].length > 1 ? measureData[0][measureData[0].length - 1] : (measureData[0].length > 0 ? measureData[0][measureData[0].length - 1] : ''))-->
    <!--          }}-->
    <!--          <input type="text">-->
    <!--          <div class="del"></div>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--      <div class="list flex boxSize">-->
    <!--        <div class="num">1.</div>-->
    <!--        <div class="input_box boxSize full flex" style="color: #FFFFFF">-->
    <!--          {{ measureData[0].length > 1 ? measureData[0][measureData[0].length - 2] : '' }}-->
    <!--          <input type="text">-->
    <!--          <div class="del"></div>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--      <div class="list flex boxSize">-->
    <!--        <div class="num">1.</div>-->
    <!--        <div class="input_box boxSize full flex" style="color: #FFFFFF">-->
    <!--          {{ measureData[0].length > 2 ? measureData[0][measureData[0].length - 3] : '' }}-->
    <!--          <input type="text">-->
    <!--          <div class="del"></div>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--      <div class="title">面积：</div>-->
    <!--      <div class="list flex boxSize">-->
    <!--        <div class="num">1.</div>-->
    <!--        <div class="input_box boxSize full flex" style="color: #FFFFFF">-->
    <!--          {{-->
    <!--            measureData[1].length > 2 ? measureData[1][measureData[1].length - 1] : (measureData[1].length > 1 ? measureData[1][measureData[1].length - 1] : (measureData[1].length > 0 ? measureData[1][measureData[1].length - 1] : ''))-->
    <!--          }}-->
    <!--          <input type="text">-->
    <!--          <div class="del"></div>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--      <div class="list flex boxSize">-->
    <!--        <div class="num">1.</div>-->
    <!--        <div class="input_box boxSize full flex" style="color: #FFFFFF">-->
    <!--          {{ measureData[1].length > 1 ? measureData[1][measureData[1].length - 2] : '' }}-->
    <!--          <input type="text">-->
    <!--          <div class="del"></div>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--      <div class="list flex boxSize">-->
    <!--        <div class="num">1.</div>-->
    <!--        <div class="input_box boxSize full flex" style="color: #FFFFFF">-->
    <!--          {{ measureData[1].length > 2 ? measureData[1][measureData[1].length - 3] : '' }}-->
    <!--          <input type="text">-->
    <!--          <div class="del"></div>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--      <div class="title">体积：</div>-->
    <!--      <div class="list flex boxSize">-->
    <!--        <div class="num">1.</div>-->
    <!--        <div class="input_box boxSize full flex" style="color: #FFFFFF">-->
    <!--          &lt;!&ndash;            {{ measureData[2].length > 2 ? measureData[2][measureData[2].length-1] : (measureData[2].length > 1 ? measureData[2][measureData[2].length-1] : (measureData[2].length > 0 ? measureData[2][measureData[2].length-1] : '')) }}&ndash;&gt;-->
    <!--          {{ measureData[2].length > 0 ? measureData[2][0] : '' }}-->
    <!--          <input type="text">-->
    <!--          <div class="del"></div>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--      <div class="list flex boxSize">-->
    <!--        <div class="num">1.</div>-->
    <!--        <div class="input_box boxSize full flex">-->
    <!--          &lt;!&ndash;            {{ measureData[2].length > 1 ? measureData[2][measureData[2].length-2] : '' }}&ndash;&gt;-->
    <!--          <input type="text">-->
    <!--          <div class="del"></div>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--      <div class="list flex boxSize">-->
    <!--        <div class="num">1.</div>-->
    <!--        <div class="input_box boxSize full flex">-->
    <!--          &lt;!&ndash;            {{ measureData[2].length > 2 ? measureData[2][measureData[2].length-3] : '' }}&ndash;&gt;-->
    <!--          <input type="text">-->
    <!--          <div class="del"></div>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </div>-->

    <!--    周长弹窗  girthDialogShow  -->
    <!--    <div class="dialog_box girth_dialog_box boxSize" v-if="girthDialogShow">-->
    <!--      <div class="close" @click="girthDialogShow = false"></div>-->
    <!--      <div class="title">周长：</div>-->
    <!--      <div class="list flex boxSize">-->
    <!--        <div class="input_box boxSize full flex">-->
    <!--          <input type="text">-->
    <!--          <div class="unit flex">m/米</div>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </div>-->

  </div>
</template>

<script>
import {sendPlottingMsg} from "@/utils/UeMessageUtils";
import {
  getAqmsOfAlarm, getWgOverLast24Hours, getPomsOfAlarm, getReportingEventsNumber, getInspectNumber,
  getComprehensiveOfAlarm, getCourentDayAlarmSite, getDetailsOfAlarmById, get24HoursTrend, getMainPollutant,
  getSiteData, getAirEnv, getRealAqiReport, getSiteRealData, getYearAqiTrend, getAqiDailyData, getChaoBiaoCompanyNum,
  getCurrentYearCompanyData, getCompanyList, pollutionPreventionMonitoring, getKeyMonitor, keyMonitoringData
} from '@/monitorApi/axios'
import * as echarts from "echarts";
import {mapGetters} from "vuex";

export default {
  name: "floatLeft",
  props: {
    showTl2: {//展示图例2
      type: Boolean,
      default: true
    },
    showAirChart: {//展示空气图表
      type: Boolean,
      default: false
    },
    showPolluteChart: {//展示污染图表
      type: Boolean,
      default: false
    },
    showTj: {
      type: Boolean,
      default: true
    },
    lleft: {
      default: 28.645
    }
  },
  data() {
    return {
      measureData: [0, 0, 0],//测绘结果
      // 园区总览
      monseIsStart: false,
      showPark: false,
      selectActive: 0,
      selectPark: '园区总览',
      parkOptions: [
        {value: 0, label: '园区总览'},
        {value: 1, label: '能源化工园'},
        {value: 2, label: '精细化工园'},
        {value: 3, label: '综合利用园'},
        {value: 4, label: '敖镇综合产业园'},
      ],
      // 空间标绘
      areaShow: false,
      areaActive: 0,
      areaOptions: [
        {
          value: 1,
          label: '箭头',
          icon_1: require('@/assets/monitor/tool_icon/icon_1.png'),
          icon_2: require('@/assets/monitor/tool_icon/icon_2.png')
        },
        {
          value: 2,
          label: '直条',
          icon_1: require('@/assets/monitor/tool_icon/icon_3.png'),
          icon_2: require('@/assets/monitor/tool_icon/icon_4.png')
        },
        {
          value: 3,
          label: '曲线',
          icon_1: require('@/assets/monitor/tool_icon/icon_5.png'),
          icon_2: require('@/assets/monitor/tool_icon/icon_6.png')
        },
        {
          value: 4,
          label: '圆形',
          icon_1: require('@/assets/monitor/tool_icon/icon_7.png'),
          icon_2: require('@/assets/monitor/tool_icon/icon_8.png')
        },
        {
          value: 5,
          label: '标签',
          icon_1: require('@/assets/monitor/tool_icon/icon_9.png'),
          icon_2: require('@/assets/monitor/tool_icon/icon_10.png')
        },
      ],
      // 工具集
      toolShow: false,
      toolActive: 0,
      toolOptions: [
        {value: 1, label: '测距', icon_1: require('@/assets/monitor/tool_icon/icon_11.png')},
        // {value: 2, label: '周长', icon_1: require('@/assets/monitor/tool_icon/icon_12.png')},
        {value: 3, label: '面积', icon_1: require('@/assets/monitor/tool_icon/icon_13.png')},
        // {value: 4, label: '体积', icon_1: require('@/assets/monitor/tool_icon/tiji.png')},
        {value: 5, label: '地表距离', icon_1: require('@/assets/monitor/tool_icon/icon_14.png')},
        {value: 6, label: '地表面积', icon_1: require('@/assets/monitor/tool_icon/icon_15.png')},
        // {value: 7, label: '地表周长', icon_1: require('@/assets/monitor/tool_icon/icon_16.png')},
      ],
      tijiActive: false,
      tijiActiveIndex: 0,
      map: 1,//0 2d  ， 1 3d
      mapModel: '3D',
      // 图表内容显示切换
      contentShow: true,
      centerIcons: [
        require('@/assets/monitor/air/center_icon_1.png'),
        require('@/assets/monitor/air/center_icon_2.png'),
        require('@/assets/monitor/air/center_icon_3.png'),
        require('@/assets/monitor/air/center_icon_4.png'),
        require('@/assets/monitor/air/center_icon_5.png'),
        require('@/assets/monitor/air/center_icon_6.png'),
        require('@/assets/monitor/air/center_icon_7.png'),
        require('@/assets/monitor/air/center_icon_8.png'),
        require('@/assets/monitor/air/center_icon_9.png'),
        require('@/assets/monitor/air/center_icon_10.png'),
        require('@/assets/monitor/air/center_icon_11.png')
      ],
      chart_1_data: [
        {value: '0℃', label: '温度', icon: require('@/assets/monitor/air/center_icon_1.png')},
        {value: '0m/s', label: '风速', icon: require('@/assets/monitor/air/center_icon_2.png')},
        {value: '0%RH', label: '湿度', icon: require('@/assets/monitor/air/center_icon_3.png')},
        {value: '0级', label: '风力', icon: require('@/assets/monitor/air/center_icon_4.png')},
        {value: '0', label: '风向', icon: require('@/assets/monitor/air/center_icon_5.png')},
      ],
      chart_2_data: [
        {label: '排污企业废气监测点', icon: require('@/assets/monitor/air/center_icon_6.png')},
        {label: '排污企业废水监测点', icon: require('@/assets/monitor/air/center_icon_7.png')},
        {label: '重点监测企业排污点', icon: require('@/assets/monitor/air/center_icon_8.png')},
        {label: '噪声监测点', icon: require('@/assets/monitor/air/center_icon_9.png')},
        {label: '空气质量监测点', icon: require('@/assets/monitor/air/center_icon_10.png')},
        {label: '水质质量监测点', icon: require('@/assets/monitor/air/center_icon_11.png')},
      ],
      chart_3_1_head: ['日', '一', '二', '三', '四', '五', '六'],
      chart_3_1_list: [],
      chart_3_1_config: [
        {label: '优', color: '#28CFFE'},
        {label: '良', color: '#41E28F'},
        {label: '轻度', color: '#FB923B'},
        {label: '中度', color: '#FB2459'},
        {label: '重度', color: '#6800A4'},
        {label: '严重', color: '#430303'},
      ],
      pollute_chart_3_1_data: [
        {name: '工厂1', val_1: 1, val_2: 1, val_3: 2},
        {name: '工厂2', val_1: 2, val_2: 2, val_3: 1},
        {name: '工厂3', val_1: 2, val_2: 2, val_3: 1},
        {name: '工厂4', val_1: 2, val_2: 1, val_3: 1},
      ],
      // 箭头弹窗
      arrDialogShow: false,
      // 标签弹窗
      tagDialogShow: false,
      // 单位弹窗
      unitDialogShow: false,
      // 周长弹窗
      girthDialogShow: false,
      mx: 0,
      my: 0
    }
  },
  mounted() {
    this.initChart_1();
    this.init_air_Chart_3_1();
    this.init_air_Chart_3_2();
    this.init_air_Chart_3_3();
    this.init_pollute_Chart_3_1_1();
    // window.addResponseEventListener("printMessage", data => {
    //   console.log("接收到消息", data)
    //   data = eval('[{' + data + '}]');
    //   this.getUe4Data(data)
    // })
  },
  computed: {
    ...mapGetters({
      showPane: 'setting/getPane',
      isRoam: 'setting/getRoam',
    }),
  },
  beforeDestroy() {
  },
  methods: {
    getUe4Data(data) {
      if (data[0].lengthMeasure) {//测距结果
        this.measureData[0].push(data[0].lengthMeasure)
      }
      if (data[0].areaMeasure) {//面积结果
        this.measureData[1].push(data[0].areaMeasure)
      }
      this.measureData[2] = []
      if (this.measureData[0].length > 0 && this.measureData[1].length > 0) {
        this.measureData[2].push(this.measureData[0][0] * this.measureData[1][0])
      }
      // if (data[0].lengthMeasure || data[0].areaMeasure) {
      //   if (this.measureData[0].length == this.measureData[1].length && (this.measureData[0].length > 0)) {
      //     this.measureData[2].push(this.measureData[0][(this.measureData[0].length - 1)] * this.measureData[1][(this.measureData[1].length - 1)])
      //   }
      // }
      console.log("消息", this.measureData)
    },
    //空间标绘点击事件
    spaceClick() {
      this.areaShow = !this.areaShow
      if (this.areaShow) { // 初始化工具集
        this.toolActive = 0
        this.toolShow = false
        this.unitDialogShow = false
        this.girthDialogShow = false
      } else sendPlottingMsg(0)
    },
    //工具集点击事件
    toolClick() {
      this.toolShow = !this.toolShow
      if (this.toolShow) { // 初始化空间标绘
        this.unitDialogShow = true
        this.areaActive = 0
        this.areaShow = false
        this.arrDialogShow = false
        this.tagDialogShow = false
      }
    },
    moveUnit(event) {
      if (this.monseIsStart) {
        console.log(event.pageX, event.pageY)
        this.mx = event.pageX
        this.my = event.pageY
      }
    },
    moveStart() {
      this.monseIsStart = true
    },
    moveEnd() {
      this.monseIsStart = false
    },
    // 隐藏全部弹窗
    closeAll() {
      this.arrDialogShow = false;
      this.tagDialogShow = false;
      this.unitDialogShow = false;
      this.girthDialogShow = false;
    },
    // 切换中间图表内容收放显示
    handleContentShow() {
      this.contentShow = !this.contentShow;
    },
    unitDialogShowChange() {
      this.unitDialogShow = false
      var descriptor = ''
      descriptor = {'lengthMeasure': 0}
      window.emitUIInteraction(descriptor);
      var descriptor1 = ''
      descriptor1 = {'areaMeasure': 0}
      window.emitUIInteraction(descriptor1);
      var descriptor2 = ''
      descriptor2 = {'earthLength': 0}
      window.emitUIInteraction(descriptor2);
      var descriptor3 = ''
      descriptor3 = {'earthArea': 0}
      window.emitUIInteraction(descriptor3);
    }
    ,
    // 园区总览
    parkOptionsClick(obj) {
      if (this.selectActive !== obj.value) {
        this.selectActive = obj.value
        this.selectPark = obj.label
        var descriptor = ''
        switch (this.selectActive - 0) {
          case 0: {
            descriptor = {'vDoing': 1}
            break
          }
          case 1: {
            descriptor = {'camera': 11}
            break
          }
          case 2: {
            descriptor = {'camera': 12}
            break
          }
          case 3: {
            break
          }
          case 4: {
            descriptor = {'camera': 14}
            break
          }
        }
        window.emitUIInteraction(descriptor);
      }
      this.showPark = !this.showPark
      this.$emit('selectParkImp', this.selectActive)
    },
    // 空间标绘
    areaOptionsClick(obj) {
      if (this.mapModel != "3D") {
        return
      }
      this.closeAll();
      var descriptor = {}
      switch (obj.value) {
        case 1:
          // 显示箭头弹窗
          descriptor = {'plotting': 1}
          this.arrDialogShow = true;
          break;
        case 2:
          descriptor = {'plotting': 2}
          break;
        case 3:
          descriptor = {'plotting': 2}
          break;
        case 4:
          descriptor = {'plotting': 3}
          break;
        case 5:
          // 显示标签弹窗
          descriptor = {'plotting': 4}
          this.tagDialogShow = true;
          break;
      }
      window.emitUIInteraction(descriptor);
      if (this.areaActive !== obj.value) {
        this.areaActive = obj.value
      }
    },

    // 工具集
    toolOptionsClick(obj) {
      // this.closeAll();
      var descriptor = {}
      switch (obj.value) {
        case 1://测距
          descriptor = {'lengthMeasure': 1}
          break
        case 2://周长
          descriptor = {'lengthMeasure': 1}
          // 显示标签弹窗
          this.tijiActive = false
          this.unitDialogShow = true;
          break;
        case 3://面积
          descriptor = {'areaMeasure': 1}
          break
        case 4://体积
          break
        case 5://地表距离
          descriptor = {'earthLength': 1}
          break
        case 6://地表面积
          descriptor = {'earthLength': 1}
          this.tijiActive = false
          break
        case 7://地表周长
          descriptor = {'earthArea': 1}
          this.toolActive = obj.value
          this.tijiActive = true
          break
      }
      window.emitUIInteraction(descriptor);

      console.log(obj)
      if (this.tijiActive) {
        this.tijiActiveIndex = obj.value
      }
      if (this.toolActive !== obj.value && !this.tijiActive) {
        this.toolActive = obj.value
      }
    },
    // 切换2D 3D
    mapModelClick() {
      this.mapModel = this.mapModel === '2D' ? '3D' : '2D';
      var value = 0
      if (this.mapModel === '3D') {
        value = 1
      }
      let descriptor = {
        vDoing: value
      }
      window.emitUIInteraction(descriptor);
    },
    // 今日天气
    initChart_1() {
      getRealAqiReport().then(res => {
        if (res.code === '200' && res.data) {
          this.chart_1_data[0].value = res.data.ta + '℃';
          this.chart_1_data[1].value = res.data.windSpeed.value + 'm/s';
          this.chart_1_data[2].value = res.data.tc + '%RH';
          this.chart_1_data[3].value = res.data.ws + '级';
          this.chart_1_data[4].value = res.data.wdStr;
        }
      }).catch(() => {
      });
    },
    // 大气监测 空气质量日历
    init_air_Chart_3_1() {
      getAqiDailyData().then(res => {
        this.chart_3_1_list = []
        if (res.code === '200' && res.data.monthData) {
          let _data = res.data.monthData.reverse();
          let firstDate = (new Date(_data[0].dateTime)).getDay();
          let beforeLen = firstDate === 0 ? 0 : firstDate;
          this.chart_3_1_list.length = beforeLen;
          _data.forEach(item => {
            let _date = (new Date(item.dateTime)).getDate()
            this.chart_3_1_list.push({
              date: _date,
              color: item.aqiColor
            })
          })
        }
      }).catch(() => {
      });
    },
    // 24小时废气排放超标次数
    init_air_Chart_3_2() {
      getWgOverLast24Hours().then(res => {
        let _xAxis = [];
        let _data = [];
        if (res.code === '200' && res.data) {
          Object.keys(res.data).forEach((item, index) => {
            _xAxis.push(item);
            _data.push(res.data[item]);
          })
            console.log(_xAxis,'24小时废气排放超标次数')
            console.log(_data,'24小时废气排放超标次数2')

          var echarts = require('echarts');
          let option = {
            grid: {
              left: "0",
              right: "0",
              bottom: "35%",
              top: "10%",
              containLabel: true,
            },
            tooltip: {
              trigger: "axis",
              backgroundColor: 'rgba(34, 40, 46, 0.5)',
              borderWidth: "0", //边框宽度设置1
              borderColor: "", //设置边框颜色
              axisPointer: {
                type: "none",
              },
              textStyle: {
                color: "#ffffff" //设置文字颜色
              },
            },
            backgroundColor: "",
            yAxis: {
              name: '单位/次',
              nameLocation: 'end',
              nameTextStyle: {
                color: "#CCCCCC",
                fontSize: 10
              },
              nameGap: 5,
              type: "value",
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#CCCCCC",
                  fontSize: 10
                },
              },
              splitLine: {
                show: true,
                lineStyle: {
                  type: 'line',
                  color: 'rgba(92,155,181)',
                  width: 0.1,
                },
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                lineStyle: {
                  type: 'line',
                  color: '#2A6FDA',
                  width: 1,
                },
              },
            },
            xAxis: [
              {
                type: "category",
                axisTick: {
                  show: false,
                },
                axisLabel: {
                  show: true,
                  textStyle: {
                    color: "#CCCCCC",
                    fontSize: 10
                  },
                },
                data: _xAxis
                // data: [
                //     '00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00',
                //     '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00',
                //     '21:00', '22:00', '23:00', '24:00'
                // ],
              },
            ],
            series: [
              {
                type: 'bar',
                showBackground: false,
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {offset: 0, color: '#F28E26'},
                    {offset: 0.5, color: 'rgba(242, 142, 38, 0.6)'},
                    {offset: 1, color: 'rgba(242, 142, 38, 0.1)'}
                  ])
                },
                emphasis: {
                  itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {offset: 0, color: '#F28E26'},
                      {offset: 0.7, color: 'rgba(242, 142, 38, 0.6)'},
                      {offset: 1, color: 'rgba(242, 142, 38, 0.1)'}
                    ])
                  }
                },
                data: _data
                // data: [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149,
                //     210, 122, 133, 334, 198, 123, 125, 220, 198, 123, 125, 220]
              }
            ]
          };
          echarts.init(this.$refs.air_chart_3_2).setOption(option);
          echarts.init(this.$refs.pollute_chart_3_2).setOption(option);
        }
      }).catch(() => {
      })
    },
    // 大气监测 全年AQI逐月变化
    init_air_Chart_3_3() {
      getYearAqiTrend().then(res => {
        if (res.code === '200' && res.data) {
            console.log(res.data,"黄")
          if (res.data.groupByAqiTypeData) {
            let _xAxis = [];
            let _data_1 = [];
            let _data_2 = [];
            let _data_3 = [];
            let _data_4 = [];
            let _data_5 = [];
            let _data_6 = [];
            let _groupByAqiTypeData = res.data.groupByAqiTypeData;
            Object.keys(_groupByAqiTypeData).forEach(item => {
              _xAxis.push(item + '月')
              _data_1.push(_groupByAqiTypeData[item]['优'] || 0);
              _data_2.push(_groupByAqiTypeData[item]['良'] || 0);
              _data_3.push(_groupByAqiTypeData[item]['轻度污染'] || 0);
              _data_4.push(_groupByAqiTypeData[item]['中度污染'] || 0);
              _data_5.push(_groupByAqiTypeData[item]['重度污染'] || 0);
              _data_6.push(_groupByAqiTypeData[item]['严重污染'] || 0);
            })

            var echarts = require('echarts');
            let option = {
              grid: {
                left: "0",
                right: "0",
                bottom: "14%",
                top: "16%",
                containLabel: true,
              },
              tooltip: {
                trigger: "axis",
                backgroundColor: 'rgba(34, 40, 46, 0.5)',
                borderWidth: "0", //边框宽度设置1
                borderColor: "", //设置边框颜色
                axisPointer: {
                  type: "none",
                },
                textStyle: {
                  color: "#ffffff" //设置文字颜色
                },
              },
              legend: {
                icon: 'circle',
                itemWidth: 4,
                itemHeight: 4,
                textStyle: {
                  color: "#ffffff", //设置文字颜色
                  fontSize: 10,
                },
                data: ['优', '良', '轻度', '中度', '重度', '严重']
              },
              backgroundColor: "",
              yAxis: {
                type: "value",
                axisLabel: {
                  show: true,
                  textStyle: {
                    color: "#cccccc",
                    fontSize: 10
                  },
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    type: 'line',
                    color: 'rgba(92,155,181)',
                    width: 0.1,
                  },
                },
                axisTick: {
                  show: false,
                },
                axisLine: {
                  lineStyle: {
                    type: 'line',
                    color: '#2A6FDA',
                    width: 1,
                  },
                },
              },
              xAxis: [
                {
                  type: "category",
                  axisTick: {
                    show: false,
                  },
                  axisLabel: {
                    show: true,
                    textStyle: {
                      color: "#cccccc",
                      fontSize: 10
                    },
                  },
                  data: _xAxis
                },
              ],
              series: [
                {
                  name: "优",
                  type: "bar", stack: "总量",
                  itemStyle: {
                    normal: {
                      barBorderRadius: 0,
                      color: '#28CFFE'
                    },
                  },
                  barWidth: 8,
                  data: _data_1
                },
                {
                  name: "良",
                  type: "bar",
                  barWidth: 8, stack: "总量",
                  barGap: "-100%",
                  data: _data_2,
                  itemStyle: {
                    normal: {
                      barBorderRadius: 0,
                      color: '#41E28F'
                    },
                  },
                },
                {
                  name: "轻度",
                  type: "bar",
                  barWidth: 8, stack: "总量",
                  barGap: "-100%",
                  data: _data_3,
                  itemStyle: {
                    normal: {
                      barBorderRadius: 0,
                      color: '#FB923B'
                    },
                  },
                },
                {
                  name: "中度",
                  type: "bar",
                  barWidth: 8, stack: "总量",
                  barGap: "-100%",
                  data: _data_4,
                  itemStyle: {
                    normal: {
                      barBorderRadius: 0,
                      color: '#FB2459'
                    },
                  },
                },
                {
                  name: "重度",
                  type: "bar",
                  barWidth: 8, stack: "总量",
                  barGap: "-100%",
                  data: _data_5,
                  itemStyle: {
                    normal: {
                      barBorderRadius: 0,
                      color: '#6800A4'
                    },
                  },
                },
                {
                  name: "严重",
                  type: "bar",
                  barWidth: 8, stack: "总量",
                  barGap: "-100%",
                  data: _data_6,
                  itemStyle: {
                    normal: {
                      barBorderRadius: 0,
                      color: '#430303'
                    },
                  },
                },
              ],
            };
            if (this.showAirChart) {
              echarts.init(this.$refs.air_chart_3_3).setOption(option);
            }
            if (this.showPolluteChart) {
              echarts.init(this.$refs.pollute_chart_3_3).setOption(option);
            }
          }
        }
      })
    },
    // 重点监测企业污染源监测
    init_pollute_Chart_3_1_1() {
      this.pollute_chart_3_1_data = []
      getKeyMonitor().then(res => {
        if (res.code === '200' && res.data) {
          this.pollute_chart_3_1_data = res.data;
        }
      }).catch(() => {
      })
    },
  }
}
</script>

<style lang="scss">

.userFlex {
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-y: auto;
}

.userFlex::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

.tools {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 999;
  margin-left: 30px;
  margin-top: 11px;

}

.child-tiji {
  position: absolute;
  top: 120px;
  right: -30px;
  background-color: #212f46;

  .tiji {

    padding-left: 0 !important;

  }

}
</style>

<style lang="scss" scoped>

.textBox{
  font-size: 14px;
  line-height: 80px;
  color: #9b9a9a;
}
.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.boxSize {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
}

.toolCenterView {
  position: relative;
  float: left;
  margin-top: 120px;
  padding-left: 7px;

  .shrink {
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer;
    width: 7px;
    height: 240px;
    background-size: 100% 100%;
    background-image: url("@/assets/monitor/air/arr_center.png");
  }

  .tools {
    width: 420px;
    flex-direction: row;
    align-items: start;

    .map_size {
      margin-right: 22px;
      width: 44px;
      height: 21px;
      background-color: rgba(0, 0, 0, 0.5);
      font-size: 6px;
      color: #D8E8EC;
    }

    .tool_item {
      width: 100px;
      background-color: rgba(0, 26, 68, 0.5);
      cursor: pointer;

      .tool_name {
        padding: 5px 6px 10px 15px;
        justify-content: start;
        width: 100%;
        color: #D8E8EC;
        font-size: 10px;
      }

      .tool_arr {
        margin-left: 10px;
        width: 8px;
        height: 8px;
        background-size: 100% 100%;
        background-image: url("@/assets/monitor/air/arr_dropdown.png");
      }

      .tool_options {
        width: 100%;

        .title {
          padding: 6px 0 6px 15px;
          width: 100%;
          font-size: 8px;
          color: #DDF8FF;
          justify-content: start;

          .tool_icon {
            width: 10px;
            height: 10px;

            img {
              display: block;
              width: 100%;
              height: 100%;
            }
          }

          .txt {
            margin: 0 6px;
          }
        }

        .title.active {
          color: #00E6FF;
        }
      }
    }
  }

  .content_box {
    width: 100%;

    .chart_title_sort {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 72px;
      height: 18px;
      background-size: 100% 100%;
      background-image: url("@/assets/monitor/air/card_title_sort.png");

      span {
        height: 18px;
        font-size: 10px;
        font-family: Source Han Sans SC;
        font-weight: bold;
        color: #FFFFFF;
        margin-left: 7px;
        line-height: 18px;
        background: linear-gradient(0deg, #90CCFF 0%, #FAFAFB 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    .chart_1 {
      padding: 10px 8px 0;
      width: 120px;
      height: 240px;
      background-size: 100% 100%;
      background-image: url("@/assets/monitor/air/card_bg_12.png");
      overflow: hidden;

      .chart_list {
        display: flex;
        flex-direction: column;
        overflow-y: auto;

        .chart_item {
          margin-top: 8px;
          justify-content: start;

          img {
            display: block;
            width: 28px;
            height: 28px;
          }

          .info {
            margin-left: 9px;

            .head {
              justify-content: start;

              .sign {
                display: block;
                margin-right: 4px;
                width: 2px;
                height: 8px;
                background-color: #00E6FF;
              }

              .chart_title {
                font-size: 6px;
                color: #DDF8FF;
              }
            }

            .chart_value {
              font-size: 10px;
              color: #00E6FF;
            }
          }
        }
      }

    }

    .chart_2 {
      padding: 10px 8px 0;
      width: 120px;
      height: 240px;
      background-size: 100% 100%;
      background-image: url("@/assets/monitor/air/card_bg_12.png");
      overflow: hidden;

      .chart_list {
        display: flex;
        flex-direction: column;
        overflow-y: auto;

        .chart_item {
          margin-top: 6px;
          justify-content: start;

          img {
            display: block;
            width: 28px;
            height: 28px;
          }

          .chart_title {
            margin-left: 6px;
            font-size: 6px;
            color: #DDF8FF;
          }
        }
      }
    }

    .chart_3 {
      padding-left: 0px;

      .chart_item {
        padding: 20px 20px 0;
        width: 264px;
        height: 145px;
        margin-left: -10px;
        background-size: 100% 100%;
        background-image: url("@/assets/monitor/air/card_bg_3.png");

        .chart_title {
          width: 214px;
          height: 24px;
          display: flex;
          flex-direction: row;
          align-items: center;
          background-size: 100% 100%;
          background-image: url("@/assets/monitor/air/card_title.png");

          span {
            height: 24px;
            font-size: 13px;
            font-family: Source Han Sans SC;
            font-weight: bold;
            color: #FFFFFF;
            margin-left: 11px;
            line-height: 24px;
            background: linear-gradient(0deg, #90CCFF 0%, #FAFAFB 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }

        }

        .chart_3_1 {
          align-items: start;

          .chart_left {
            width: 175px;
            height: 90px;

            .head {
              justify-content: start;

              .head_label {
                width: 25px;
                height: 4px;
                text-align: center;
                line-height: 4px;
                font-size: 5px;
                color: #00FFC1;
                margin-top: 10px;
              }
            }

            .list {
              flex-wrap: wrap;
              align-items: start;
              justify-content: start;

              .list_label {
                width: 25px;
                height: 4px;
                text-align: center;
                line-height: 4px;
                font-size: 5px;
                color: #ffffff;
                margin-top: 10px;
              }
            }
          }

          .chart_right {
            margin-top: 3px;
            margin-left: 15px;

            .config_list {
              align-items: center;
              justify-content: start;
              height: 14px;
              width: 40px;

              .icon {
                width: 4px;
                height: 4px;
                border-radius: 50%;
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                -ms-border-radius: 50%;
                -o-border-radius: 50%;
              }

              .label {
                margin-left: 3px;
                font-size: 5px;
                color: rgba(255, 255, 255, 0.6);
              }
            }
          }
        }

        .chart_3_2 {
          width: 220px;
          height: 130px;
        }

        .chart_3_3 {
          width: 220px;
          height: 100px;
          //background-color: #00FF78;
        }
      }

    }
  }

  .dialog_box {
    position: absolute;
    z-index: 999;
    padding: 10px;

    .title {
      height: 13px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #D8E8EC;
      background: linear-gradient(0deg, #23A5F7 0.146484375%, #CAF6FF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .column {
      margin-top: 13px;
      height: 26px;

      .name {
        width: 52px;
        text-align: left;
        height: 14px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #DDF8FF;
      }

      .input_box {
        flex: 1;
        padding-left: 5px;
        width: 113px;
        height: 26px;
        background: rgba(8, 32, 72, 0.7);

        input {
          width: 100%;
          height: 100%;
          border: none;
          outline: none;
          background-color: transparent;
        }

        input::-webkit-input-placeholder {
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #DDF8FF;
        }

        .del {
          margin-right: 4px;
          width: 17px;
          height: 17px;
          background-size: 100% 100%;
          background-image: url("@/assets/monitor/air/del_2.png");
          cursor: pointer;
        }
      }

      .arr {
        margin: 0 2px;
        width: 6px;
        height: 7px;
        background-size: 100% 100%;
        background-image: url("@/assets/monitor/air/arr_right.png");
      }

      .btn_item {
        float: right;
        margin-left: 10px;
        width: 48px;
        height: 18px;
        opacity: 0.5;
        cursor: pointer;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #DDF8FF;
      }

      .btn_item.cancel {
        background: rgba(221, 248, 255, 0.5);
      }

      .btn_item.sub {
        background: rgba(0, 230, 255, 0.7);
      }
    }

    .btn_box:after {
      clear: both;
    }

  }

  .arr_dialog_box {
    left: 250px;
    top: 150px;
    width: 310px;
    height: 150px;
    background: rgba(8, 32, 72, 0.7);

    .sign {
      position: absolute;
      left: 0;
      top: 0;
      width: 23px;
      height: 23px;
      background-size: 100% 100%;
      background-image: url("@/assets/monitor/air/chart_sign_1.png");
    }
  }

  .tag_dialog_box {
    left: 250px;
    top: 150px;
    width: 339px;
    height: 107px;
    background: rgba(8, 32, 72, 0.7);

    .limit {
      margin-right: 8px;
      height: 12px;
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #DDF8FF;
    }
  }

  .unit_dialog_box {
    position: fixed;
    left: 783px;
    top: 167px;
    padding: 4px 8px;
    width: 120px;
    height: 274px;
    background-size: 100% 100%;
    background-image: url("@/assets/monitor/air/chart_bg_16.png");

    .hide-focus {
      position: absolute;
      width: 100px;
      height: 20px;
      left: 0;
      top: 2px;
      z-index: 9;
    }

    .hide-focus:hover {
      cursor: move;
    }

    .close {
      position: absolute;
      right: 5px;
      top: 5px;
      width: 12px;
      height: 12px;
      background-size: 100% 100%;
      background-image: url("@/assets/monitor/air/del_1.png");
      cursor: pointer;
    }

    .title {
      margin-top: 5px;
      height: auto;
    }

    .list {
      margin-top: 4px;
      height: 18px;
      align-items: center;
      justify-content: start;

      .num {
        height: 18px;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
      }

      .input_box {
        flex: 94px;
        height: 18px;
        background: rgba(8, 32, 72, 0.7);

        input {
          width: 75px;
          height: 100%;
          border: none;
          outline: none;
          background-color: transparent;
        }

        .del {
          margin-right: 3px;
          width: 13px;
          height: 13px;
          background-size: 100% 100%;
          background-image: url("@/assets/monitor/air/del_3.png");
          cursor: pointer;
        }
      }
    }
  }

  .girth_dialog_box {
    left: 350px;
    top: 150px;
    width: 156px;
    height: 68px;
    background: rgba(8, 32, 72, 0.7);

    .close {
      position: absolute;
      right: 5px;
      top: 5px;
      width: 12px;
      height: 12px;
      background-size: 100% 100%;
      background-image: url("@/assets/monitor/air/del_1.png");
      cursor: pointer;
    }

    .title {
      margin-top: 5px;
    }

    .list {
      margin-top: 4px;
      height: 18px;
      align-items: center;
      justify-content: start;

      .input_box {
        flex: 138px;
        height: 36px;
        background: rgba(8, 32, 72, 0.7);

        input {
          width: 100px;
          height: 100%;
          border: none;
          outline: none;
          background-color: transparent;
        }

        .unit {
          margin-right: 3px;
          width: 30px;
          height: 36px;
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #DDF8FF;
        }
      }
    }
  }
}

@media screen and (min-width: 1000px) and (max-width: 3000px) {
  $width_2k: 1920;
  $height_2k: 1080;
  $width: 4000;
  $height: 1486;
  $unit: px;
  @function calWidth_2k($pixel) {
    @return $width_2k*$pixel/$width;
  }
  @function calWidthCenter($pixel) {
    @return $pixel/5*8;
  }
  @function calHeight_2k($pixel) {
    @return $pixel/1.8*2.7;
  }
  @function calFont_2k($pixel) {
    @return $height_2k*$pixel/$height;
  }
  .toolCenterView {
    height: calHeight_2k(100px);
    margin-top:  calHeight_2k(120px);
    .shrink {
      height: calHeight_2k(200px);
    }
    .content_box {


      .chart_2 {
        width: calWidthCenter(120px);
        height: calHeight_2k(200px);
      }

      .chart_1 {
        height: calHeight_2k(200px);
      }
    }
  }
}

</style>
